<template>
	<view class="tui-addr-box">
		<block v-if="value == '0'">
		<form :report-submit="true" @submit="saveAddress">
			<tui-list-cell :hover="false" padding="0">
				<view class="tui-line-cell">
					<view class="tui-title">姓名</view>
					<input placeholder-class="tui-phcolor" class="tui-input" name="name" placeholder="请输入" maxlength="15" type="text" />
				</view>
			</tui-list-cell>
			<tui-list-cell :hover="false" padding="0">
				<view class="tui-line-cell">
					<view class="tui-title">类别</view>
					<radio-group @change="radioChange">
					<label class="radio"><radio value="1" checked="true" />成人</label>
					<label class="radio"><radio value="0" />儿童</label>
					</radio-group>

				</view>
			</tui-list-cell>
			<tui-list-cell :hover="false" padding="0">
				<view class="tui-line-cell">
					<view class="tui-title">手机号码</view>
					<input placeholder-class="tui-phcolor" class="tui-input" name="phone" placeholder="请输入" maxlength="11"
					 type="text" />
				</view>
			</tui-list-cell>
			<view class="ge">为了您和宠物购买保险，保障活动安全</view>
			<tui-list-cell :hover="false" padding="0">
				<view class="tui-line-cell">
					<view class="tui-title">证件号码</view>
					<input placeholder-class="tui-phcolor" class="tui-input" name="certificates" placeholder="请输入" maxlength="18"
					 type="text" />
				</view>
			</tui-list-cell>
			<tui-list-cell :hover="false" padding="0">
				<view class="tui-line-cell">
					<view class="tui-title">出生日期</view>
					<view class="uni-list-cell-db">
						<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
							<view class="uni-input">{{birthday}}</view>
						</picker>
					</view>
				</view>
			</tui-list-cell>


			<!-- 保存地址 -->
			<view class="tui-addr-save" > 
				<button  class="tui-btn tui-btn-block tui-danger" formType="submit" >新增联系人</button>
			</view>
		</form>
		</block>
		<!-- 宠物添加 -->
		<block v-else>
		<view class="chooseImg" @tap="openChooseImg">
			<view class="choosetitle" v-if="!imgUrl">点击添加头像</view>
			<image v-else :src="imgUrl" ></image> 
		</view>
		<form :report-submit="true" @submit="savePets">
			
			<tui-list-cell :hover="false" padding="0">
				<view class="tui-line-cell">
					<view class="tui-title">宠物昵称</view>
					<input placeholder-class="tui-phcolor" class="tui-input" name="name" placeholder="请输入" maxlength="15" type="text" />
				</view>
			</tui-list-cell>
			<tui-list-cell :hover="false" padding="0">
				<view class="tui-line-cell">
					<view class="tui-title">宠物性别</view>
					<radio-group @change="petsChange">
					<label class="radio"><radio value="1" checked="true" />GG</label>
					<label class="radio"><radio value="0" />MM</label>
					</radio-group>
		
				</view>
			</tui-list-cell>
			
			<tui-list-cell :hover="false" padding="0">
				<view class="tui-line-cell">
					<view class="tui-title">宠物品种</view>
					<input placeholder-class="tui-phcolor" class="tui-input" name="varieties" placeholder="请输入" maxlength="15" type="text" />
				</view>
			</tui-list-cell>
			
			<tui-list-cell :hover="false" padding="0">
				<view class="tui-line-cell">
					<view class="tui-title">毛色</view>
					<input placeholder-class="tui-phcolor" class="tui-input" name="color" placeholder="请输入" maxlength="15" type="text" />
				</view>
			</tui-list-cell>
			
			
			<tui-list-cell :hover="false" padding="0">
				<view class="tui-line-cell">
					<view class="tui-title">疫苗时间</view>
					<view class="uni-list-cell-db">
						<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
							<view class="uni-input">{{birthday}}</view>
						</picker>
					</view>
				</view>
			</tui-list-cell>
			
			<tui-list-cell :hover="false" padding="0">
				<view class="tui-line-cell">
					<view class="tui-title">生日</view>
					<view class="uni-list-cell-db">
						<picker mode="date" :value="date2" :start="startDate" :end="endDate" @change="bindDateChange2">
							<view class="uni-input">{{cat}}</view>
						</picker>
					</view>
				</view>
			</tui-list-cell>
		
		
			<!-- 保存地址 -->
			<view class="tui-addr-save" > 
				<button  class="tui-btn tui-btn-block tui-danger" formType="submit" >新增宠物</button>
			</view>
		</form>
		</block>
	</view>
</template>

<script>
	var api = require('@/common/api.js')
	const form = require("../../../components/utils/formValidation.js")
	import tuiButton from "@/components/extend/button/button"
	import tuiListView from "@/components/list-view/list-view"
	import tuiListCell from "@/components/list-cell/list-cell"
	export default {
		components: {
			tuiButton,
			tuiListView,
			tuiListCell
		},
		data() {
			return {
				userinfo:'',
				sex:'1',
				date:'请选择',
				birthday:'请选择',
				formData:[],
				imgUrl:"",
				lianxi:{type:0},
				pets:{type:1},
				value:'',
				cat:"请选择",
				data2:'请选择'
			}
		},
		onLoad(options) {
			this.value = options.type
			if(this.tui.isLogin()){
				this.userinfo = uni.getStorageSync("user")
			}else{
				uni.showToast({
					title:"您没有登陆，请先登录",
					icon:"none"
				})
				setTimeout(function(){
					uni.navigateTo({
						url:"/pages/index/index"
					})
				},1000)
			}
		},
		methods: {
			test:function(e){
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];
				uni.navigateBack({
				     success: function() {
				         prevPage.onLoad(e); // 执行前一个页面的onLoad方法
				     }
				});
			},
			radioChange: function(e) {
			    this.sex = e.detail.value;//e.detail.value就是每次选择后得出来的值
			},
			bindDateChange: function(e) {
				this.data = e.target.value;
				this.birthday = this.data;
			},
			
			bindDateChange2: function(e) {

				this.data2 = e.target.value;
				this.cat = this.data2;
			},

			saveAddress(e){
				let rules = [{
					name: "name",
					rule: ["required", "isChinese", "minLength:2", "maxLength:6"], //可使用区间，此处主要测试功能
					msg: ["请输入姓名", "姓名必须全部为中文", "姓名必须2个或以上字符", "姓名不能超过6个字符"]
				}, {
					name: "phone",
					rule: ["required", "isMobile"],
					msg: ["请输入手机号", "请输入正确的手机号"]
				},{
					name: "certificates",
					rule: ["required",  "minLength:18", "maxLength:18"], //可使用区间，此处主要测试功能
					msg: ["请输入证件号", "请填写正确的证件号","请填写正确的证件号6个字符"]
				}];
				
				//进行表单检查
				this.formData = e.detail.value;
				let checkRes = form.validation(this.formData, rules);
				if (checkRes) {
					uni.showToast({
						title: checkRes,
						icon: "none"
					});
				}else{
					api.post({
						url:"order/personnel",
						data:{
							user_id:this.userinfo.id,
							name:this.formData.name,
							phone:this.formData.phone,
							certificates:this.formData.certificates,
							sex:this.sex,
							birthday:this.birthday
						},
						success: res => {
							if(res.code == 1){
								this.test(this.lianxi)
								
							}else{
								uni.showToast({
									title: '表单提交失败，请重新填写。',
									icon:'none',
									duration: 2000
								});
							}
						}
					})
				}
				
			},
			savePets(e){
				this.formData = e.detail.value;
				api.post({
					url:"order/petsListpost",
					data:{
						user_id:this.userinfo.id,
						title:this.formData.name,
						thumb:this.imgUrl,
						color:this.formData.color,
						varieties:this.formData.varieties,
						sex:this.sex,
						vaccines_time:this.birthday,
						birthday:this.cat,
					},
					success: res => {
						if(res.code == 1){
							this.test(this.pets)
						}else{
							uni.showToast({
								title: '表单提交失败，请重新填写。',
								icon:'none',
								duration: 2000
							});
						}
					}
				})
			},
			openChooseImg(){
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择，和摄像头功能，默认二者都有
					success: res=> {
						console.log(res)     
						/*res.tempFilePaths[0]是获取到的第一个数据的blob地址，将他赋值给数据区的imgUrl*/
						this.imgUrl=res.tempFilePaths[0]
						console.log(this.imgUrl)
					}
				});
			}
		}
	}
</script>

<style>
	.chooseImg{width:200rpx;height:200rpx;margin:0 auto}
	.chooseImg image{width:100%;height:100%;border-radius: 100%;}
	.choosetitle{width: 100%;
    height: 100%;
    line-height: 190rpx;
    font-size: 26rpx;
    text-align: center;
    border-radius: 100%;
    border: 2rpx solid #ccc;
    color: #ccc;}
	.ge{height:40rpx;width:100%;background-color:rgb(255, 204, 0,.3);color: rgb(255, 204, 0);font-size:28rpx;padding: 10rpx 30rpx} 
	.uni-radio-input{
		background-color: rgb(255, 204, 0) !important;
		    border-color: rgb(255, 204, 0) !important;
	}
	picker {
		font-size:28upx;
		color: #666;
	}
	.tui-btn-block {
		font-size: 36rpx;
		height: 90rpx;
		line-height: 90rpx;
	}
	.tui-danger {
		background: rgb(255, 204, 0) !important;
		color: #fff;
		font-size:32upx;
		border-radius: 0;
	}
	.tui-addr-box {
		padding: 20rpx 0;
	}

	.tui-line-cell {
		width: 100%;
		padding: 24rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.tui-title {
		width: 180rpx;
		font-size: 28rpx;
	}

	.tui-title-city-text {
		width: 180rpx;
		height: 40rpx;
		display: block;
		line-height: 46rpx;
	}

	.tui-input {
		width: 500rpx;
	}

	.tui-input-city {
		flex: 1;
		height: 40rpx;
		font-size: 28rpx;
		padding-right: 30rpx;
	}

	.tui-phcolor {
		color: #ccc;
		font-size: 28rpx;
	}
	.tui-cell-title{
		font-size: 28rpx;
	}
	.tui-addr-label {
		margin-left: 70rpx;
	}

	.tui-label-item {
		width: 76rpx;
		height: 40rpx;
		border: 1rpx solid rgb(136, 136, 136);
		border-radius: 6rpx;
		font-size: 26rpx;
		text-align: center;
		line-height: 40rpx;
		margin-right: 20rpx;
		display: inline-block;
		transform: scale(0.9);
	}
	.tui-label-active{
		background: #E41F19;
		border-color:#E41F19;
		color: #fff;
	}
	.tui-swipe-cell {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		padding: 10rpx 24rpx;
		border-radius: 6rpx;
		overflow: hidden;
		font-size: 28rpx;
	}

	.tui-switch-small {
		transform: scale(0.8);
		transform-origin: 100% center;
	}

	/* #ifndef H5 */
	.tui-switch-small .wx-switch-input {
		margin: 0 !important;
	}

	/* #endif */

	/* #ifdef H5 */
	>>>uni-switch .uni-switch-input {
		margin-right: 0 !important;
	}

	/* #endif */

	.tui-addr-save {
		padding: 24rpx;
		margin-top: 100rpx;
	}

	.tui-del {
		padding: 24rpx;
	}
</style>
